<template>
    <my-overlay>
        <div id="eggs"></div>
        <my-prompt :show="promptShow" @confirm="onConfirm">
            <div class="prize_eggs">
                <img v-if="prizeType === 3" class="card_prize" :src="cardImg" alt="奖品">
                <img v-else class="icon_prize" :src="prizes[currentMark]" alt="奖品">
                <span>恭喜获得<span v-show="prizeAmount">{{prizeAmount}}个</span>{{ prizeName }}</span>
            </div>
        </my-prompt>
    </my-overlay>
</template>

<script>
import Eggs from '@/games/eggs'

export default {
    name: 'eggs',
    data () {
        return {
            promptShow: false,
            // 奖品图片映射
            prizes: {
                '0': require('@/assets/images/textures/material/eggs/icon_gold.png'),
                '1': require('@/assets/images/textures/material/eggs/icon_cdb.png'),
                '2': require('@/assets/images/textures/material/eggs/red_pag.png'),
                '3': require('@/assets/images/textures/material/eggs/icon_draft.png'),
            },
            prizeName: '',
            prizeAmount: 0,
            prizeType: -1,
            currentMark: '', // 当前中奖映射
            cardImg: '', // 卡片稿子图片
            eggs: null, // 游戏对象
        }
    },
    mounted () {
        this.gameInit()
    },
    methods: {
        gameInit () {
            let eggs = new Eggs()
            this.eggs = eggs
            // 关闭钩子函数
            eggs.listen({
                // 关闭按钮钩子函数
                onClose: () => {
                    this.$router.back(-1)
                },
                // 敲蛋钩子函数
                onBreaked: (info) => {
                    // console.log(info)
                    // 提取数据, 奖品名称, 奖品的映射标志
                    let { prizeName, prizeMark, cardImg, amount, type } = info
                    this.prizeName = prizeName
                    this.prizeType = type // 0 金币 1 彩蛋币 2 现金 3 卡片稿子
                    this.currentMark = Number(prizeMark)
                    this.cardImg = cardImg
                    this.prizeAmount = amount
                    // 更新 vuex 中的 次数
                    let { userInfo } = this.$store.state
                    let num = userInfo.eggsNums - 1
                    num >= 0 && this.$store.commit('updateUserInfo', {
                        eggsNums: num
                    })
                    // 300毫秒后, 展示提示, 让子弹飞一会
                    setTimeout(() => {
                        this.$nativeApi._watchAD( async () => {
                            this.promptShow = true
                            // 如果类型为金币, 则更新金币数量
                            if (type === 0) {
                                this.$store.commit('updateUserInfo', {
                                    gold: userInfo.gold + amount
                                })
                            }
                        })
                    }, 300)
                }
            })
        },
        onConfirm () {
            this.promptShow = false
            // 重新刷新 砸蛋 canvas 视图
            this.eggs.resetEggsView()
        }
    }
}
</script>
<style lang="less" scoped>
#eggs {
    height: 100vh;
    width: 100vw;
}
.prize_eggs {
    .flex;
    flex-direction: column;
    align-items: center;
    > img.icon_prize {
        width: 80 / @widthScale;
        margin-bottom: 46 / @widthScale;
    }
    > img.card_prize {
        margin-bottom: 46 / @widthScale;
        margin-top: -100 / @widthScale;
        width: 180 / @widthScale;
    }
    > span {
        color: #6C2127;
        font-weight: bold;
        font-size: 0.9rem;
    }
}
</style>